// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #00d1b2;
$primary-hover: $primary;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Lists and maps
$custom-colors: null;
$custom-shades: null;

// sidebar
$menuText: #bfcbd9;
$menuActiveText: #409EFF;
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951

$navbar-avatar-size: 1.75rem;
$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

/* Base: Size  */
$size-base: 1rem;
$default-padding: $size-base * 1.5;
/* Base color */
$white: #ffffff;
$base-color: rgb(48, 65, 86);
$background-color-base: #F5F7FA !default;
$base-color-light: rgba(24, 28, 33, .06);
$grey-light: hsl(0, 0%, 71%) !default;
$grey-lighter: hsl(0, 0%, 86%) !default;

/* Aside: specifics */
$aside-width: $size-base * 15;
$aside-mobile-width: $size-base * 15;
$aside-icon-width: $size-base * 3;
$aside-submenu-font-size: $size-base * .95;
$aside-box-shadow: 1px 0 #f1f2f2;
$aside-background-color: $base-color;
$aside-input-color: rgb(191, 203, 217);
$aside-tools-background-color: darken($aside-background-color, 50%);
$aside-tools-color: $white;

/* NavBar: specifics */
$navbar-input-color: $base-color;
$navbar-input-placeholder-color: $grey-lighter;
$navbar-box-shadow: 0 1px 0 rgba(24, 28, 33, .04);
$navbar-divider-border: 1px solid rgba($grey-lighter, .25);
$navbar-item-h-padding: $default-padding * .75;

/* Footer: specifics */
$footer-logo-height: $size-base * 2;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
                (
                        "white": (
                                $white,
                                $black,
                        ),
                        "black": (
                                $black,
                                $white,
                        ),
                        "light": (
                                $light,
                                $light-invert,
                        ),
                        "dark": (
                                $dark,
                                $dark-invert,
                        ),
                        "primary": (
                                $primary,
                                $primary-invert,
                                $primary-light,
                                $primary-dark,
                        ),
                        "link": (
                                $link,
                                $link-invert,
                                $link-light,
                                $link-dark,
                        ),
                        "info": (
                                $info,
                                $info-invert,
                                $info-light,
                                $info-dark,
                        ),
                        "success": (
                                $success,
                                $success-invert,
                                $success-light,
                                $success-dark,
                        ),
                        "warning": (
                                $warning,
                                $warning-invert,
                                $warning-light,
                                $warning-dark,
                        ),
                        "danger": (
                                $danger,
                                $danger-invert,
                                $danger-light,
                                $danger-dark,
                        ),
                ),
                $custom-colors
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
:root {
  --primary: #409EFF;
}
:export {
  theme: $primary;
}
